import React, { useEffect, useCallback, useRef, Fragment } from 'react'
import { usePage } from '@/hooks/page'
import { Container, Button, CardMedia, Box, makeStyles, Card, CardContent, Typography, CardHeader, Avatar, IconButton, Backdrop, CircularProgress } from '@material-ui/core'
import { useStore } from 'reto'
import Blog from '@/store/blog'
import { useParams } from 'umi'
import StoreyTitle from '@/component/StoreyTitle'
import HeaderImage from '@/component/HeaderImage'
import CommentItem from '@/component/CommentItem'
import { parseDate } from '@/utils/time'
import { IComment } from '@/interface'
import MarkdownElement from '@/component/MarkdownElement'
import CommentForm from '@/component/CommentForm'
import Skeleton from '@material-ui/lab/Skeleton'
import FailView from '@/component/FailView'

`@media (min-width:600px) {
  .MuiContainer-fixed {
    max-width: 600px;
  }
}`

const useStyles = makeStyles({
  root: {
    position: 'relative',
    display: 'flex',
    flexDirection: 'column',
    height: '100%',
  },
  headerImage: {
    height: '280px',
  },
  container: {
    position: 'relative',
    marginTop: '-20px',
    minHeight: 'auto',
    flex: 1,
  },
  '@media (max-width:800px)': {
    container: {
      padding: '8px 0'
    } 
  }
})

export default () => {
  const classes = useStyles()
  const params: any = useParams()
  const {
    infoModel,
    commentModel,
    submitComment
  } = useStore(
    Blog,
    store => [store.infoModel, store.commentModel, store.submitComment]
  )
  const blogData = infoModel.data

  infoModel.loadData.autoRun(
    [params.id],
    () => blogData?.id !== parseInt(params.id)
  )
  commentModel.loadData.autoRun([params.id])
  const commentList = commentModel.data?.list
  const resetRef = useRef<() => void>()

  const handleSubmit = useCallback((data) => {
    submitComment(params.id, data, resetRef.current)
  }, [params.id, submitComment])

  usePage({
    appBarTitleText: blogData?.title || '',
  })

  return <div
    className={classes.root}
  >
    <HeaderImage
      title={blogData?.title}
      cover={blogData?.pic}
    />
    <Container
      className={classes.container}
    >
      <Card>
        <CardHeader
          avatar={
            <Avatar src={blogData?.authorInfo.face}>
              {blogData?.author}
            </Avatar>
          }
          title={blogData?.author || <Skeleton width={80} />}
          subheader={
            blogData?.createDate
              ? "发表于：" + parseDate(blogData.createDate)
              : <Skeleton width={36} />
          }
        />
        <CardContent>
          <MarkdownElement
            renderedMarkdown={blogData?.content || ''}
          />
          {
            infoModel.loadData.loading && (
              <Fragment>
                <Skeleton />
                <Skeleton />
                <Skeleton />
                <Skeleton width={120} />
              </Fragment>
            )
          }
          {
            infoModel.loadData.fail && (
              <FailView
                reload={() => infoModel.loadData(params.id)}
                message={infoModel.loadData.fail}
              />
            )
          }

          <StoreyTitle>发表评论</StoreyTitle>
          <CommentForm
            onSubmit={handleSubmit}
            loading={submitComment.loading}
            resetRef={ref => resetRef.current = ref}
          />
          <StoreyTitle>评论列表</StoreyTitle>
          {
            commentList?.map((item: IComment, index) => (
              <CommentItem
                key={item.id}
                username={item.name}
                face={item.face}
                email={item.email}
                website={item.website}
                content={item.content}
                time={parseDate(item.createDate)}
                marginBottom={3}
              />
            ))
          }
          {
            commentModel.loadData.loading 
              && Array.from(new Array(2)).map((item, index) => (
              <CommentItem
                marginBottom={3}
              />
            ))
          }
          {
            commentModel.loadData.fail && (
              <FailView 
                reload={() => commentModel.loadData(params.id)}
                message={commentModel.loadData.fail}
              />
            )
          }
        </CardContent>
      </Card>
    </Container>
  </div>
}